<template>
	<view class="box">
		<view class="status_bar">
			<view class="top_view">
				<!-- <image src="../../static/index/logo.png" mode="widthFix" class="logo"></image> -->
				<text class="iconfont icon-xiazai6" @tap="jump()"></text>
				<!-- <text>矿机商城</text>
				<view class=""></view> -->
			</view>
		</view>
		<view class="senter">
			<view class="title">手机验证码注册</view>
			<view class="phon">
				<view>
					国家/地址
					<text>
						中国
						<text>
							+86
							<i class=".icon-youjiantou:before"></i>
						</text>
					</text>
				</view>
				<input type="text" value="" placeholder="请输入手机号" />
			</view>
			<view class="yanzhengma">
				<view>验证码</view>
				<view>
					<input type="text" value="" placeholder="请输入密码" />
					<view @tap="huoqu" v-if="showText">获取验证码</view>
					<view v-if="!showText">{{num}}秒重发</view>
				</view>
				<view @tap="mima()">
					<text>用密码登录</text>
				</view>
			</view>
			<input type="button" value="下一步" class="btn" @tap="xinxi()" />
		</view>
		<view class="xieyi">注册即表示同意碰碰用户协议</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			num:60,
			showText:true,
		};
	},
	methods: {
		jump() {
			uni.navigateBack({
				delta: 1
			});
		},
		xinxi() {
			uni.navigateTo({
				url: '../zhuce/zcbianjixinxi'
			});
		},
		mima(){
			uni.navigateTo({
				url: '../denglu/denglu'
			});
		},
		huoqu(){
			 this.showText = false
			       var interval = setInterval(() => {
			          --this.num
			       }, 1000)
			       setTimeout(() => {
			          clearInterval(interval)
					   this.num=60
			           this.showText = true
			       }, 60000)
		}
	}
};
</script>

<style lang="less">
page {
	width: 100%;
	height: 100%;
	.box {
		font-family: PingFang SC;
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #1f1e24;
		.status_bar {
			box-sizing: border-box;
			// 自定义状态栏高度
			height: var(--status-bar-height);
			position: relative;
			height: 88upx;
			// transparent
			background-color: #fff;
			.top_view {
				box-sizing: border-box;
				background-color: #1f1e24;
				height: 88upx;
				padding: 0 30upx;
				// padding-top: calc(25upx + var(--status-bar-height));
				width: 100%;
				position: fixed;
				top: 0;
				z-index: 999;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 36upx;
				color: #fff;
				.logo {
					width: 37upx;
					height: 37upx;
				}
			}
		}
		.senter {
			padding: 0 57upx;
			position: relative;
			.title {
				font-size: 43upx;
				color: #ffe093;
				margin-top: 116upx;
			}
			.phon {
				margin-top: 83upx;
				& > view {
					font-size: 32upx;
					color: #f2f2f2;
					& > text:nth-child(1) {
						margin-left: 10upx;
						text {
							color: #ffdf97;
						}
					}
				}
				input {
					box-sizing: border-box;
					width: 635upx;
					height: 79upx;
					font-size: 32upx;
					color: #eeeeee;
					background-color: rgba(242, 242, 242, 0.1);
					margin-top: 38upx;
					padding: 0 15upx;
				}
			}
			.yanzhengma {
				& > view:nth-child(1) {
					font-size: 32upx;
					color: rgba(255, 223, 146, 1);
					margin-top: 29upx;
				}
				& > view:nth-child(2) {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28upx;
					height: 72upx;
					background-color: rgba(242, 242, 242, 0.1);
					margin-top: 21upx;
					input {
						flex: 1;
						padding: 0 10upx;
						color: #ffe093;
						font-size: 28upx;
					}
					view {
						width: 180upx;
						font-size: 24upx;
						color: rgba(242, 242, 242, .7);
						text-align: center;
						margin-left: 20upx;
						border-left: 1upx solid  rgba(242, 242, 242, 1);
					}
				}
				view:nth-child(3) {
					font-size: 28upx;
					color:rgba(153,153,153,1);
					margin-top: 27upx;
				}
			}
			.btn {
				width: 635upx;
				height: 88upx;
				background-color: #ffe093;
				color: #1f1e24;
				font-size: 32upx;
				line-height: 88upx;
				text-align: center;
				margin-top: 58upx;
			}
			
		}
		.xieyi {
			width: 100%;
			position: absolute;
			bottom: 49upx;
			text-align: center;
			font-size: 26upx;
			color: #ffe093;
		}
	}
}
</style>
